<template>
  <!-- logo容器 -->
  <div class="logoWrp" @click="goHome">
    <!-- logo图
              当滚轮到底部的距离为0时显示logoImg[0]
              否则显示logoImg[1] 
           -->
    <img
      :src="$store.state.scrollTop == 0 ? logoImg[0] : logoImg[1]"
      alt="logo"
      class="logoimg"
    />
    <!-- logo文字
              当滚轮到底部的距离不为0时修改字体颜色
           -->
    <span :style="$store.state.scrollTop != 0 && { color: '#0182c7' }" class="qingji"
      >氢记</span
    >
  </div>
</template>

<script>
export default {
  name: "Logo",
  data() {
    return {
      // 两种不同的logo
      logoImg: [require("@/images/logo1.png"), require("@/images/logo.png")],
    };
  },
  methods: {
    // 去主页
    goHome() {
      // 如果当前路由不为home
      if (window.location.hash != "#/home") {
        // 跳转到home
        this.$router.push("/home");
      } else {
        // 刷新当前页面
        this.$router.go(0);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// logo容器
.logoWrp {
  // 字体大小
  font-size: 24px;
  // 子元素水平垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
  // 小手
  cursor: pointer;
  // logo图
  .logoimg {
    // 宽高
    width: 35px;
    height: 35px;
  }
  // logo文字
  span {
    // 字体
    font-family: "楷体";
    // 内边距
    padding: 0 40px 0px 10px;
    // 粗体
    font-weight: bold;
    // 字间距
    letter-spacing: 2px;
    // 字体颜色
    color: white;
  }
}
/*在浏览器视口宽小于375px时生效*/
@media (max-width: 375px) {
  // logo图
  .logoWrp .logoimg {
    // 宽高
    width: 25px;
    height: 25px;
  }
  // logo容器
  .logoWrp {
    // 字体大小
    font-size: 16px;
  }
  // logo文字
  .logoWrp span {
    // 内边距
    padding: 0 40px 0 5px;
  }
}
</style>